<template>
  <div class="loginBox">
    <div class="logo">
      <div class="textAndImg"></div>
      <div class="imgOne"></div>
    </div>
    <div class="left">
      <div class="login">
        <div class="title">您好，欢迎来到中科软</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="username">
            <div class="inputTitle">账号名称</div>
            <el-input
              v-model="loginForm.username"
              placeholder="支持手机号和用户名登录"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <div class="inputTitle">密码</div>
            <el-input
              show-password
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="inputTitle">验证码</div>
            <el-row>
              <el-col :span="18"
                ><el-input
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.code"
                  placeholder="请输入验证码"
                  style="width: 310px"
                ></el-input
              ></el-col>
              <el-col :span="6">
                <div class="login-code" @click="getCode">
                  <img :src="codeUrl" class="login-code-img" />
                </div>
              </el-col>
            </el-row>
          </el-form-item></el-form
        >
        <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
        <div>
          <el-button type="primary" :loading="loading" @click="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span></el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg, findWxQrLoginInfo, login } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
// import dentify from "../components/dentify.vue";
export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        code: "",
        rememberMe: false,
        uuid: "",
      },
      loading: false,
      redirect: undefined,
      loginRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { max: 32, message: "您录入字数超过32字！", trigger: "blur" },
          { min: 4, message: "您录入字数不能低于4字！", trigger: "blur" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
          { min: 8, max: 20, trigger: "blur", message: "密码要求8-20位" },
        ],
        code: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
      // 是否记住密码

      // 问卷提交内容
      // formLogin: {
      //   code: "", //验证码输入框
      // },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz", //随机串内容,从这里随机抽几个显示验证码
      identifyCode: "", //验证码图片内容
    };
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    //参数：（1）随机串内容。（2）验证码显示位数
    this.makeCode(this.identifyCodes, 4);
    this.getCode();
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    // 重置验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //获取验证码的值
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        //通过循环获取字符串内随机几位
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    //随机数字：用于当角标拿字符串的值
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    submit() {
      console.log("验证码:", this.identifyCode);
      console.log("用户输入的验证码:", this.loginForm.code);
      console.log("是否验证通过:", this.identifyCode == this.formLogin.code);
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          // console.log(this.loginForm.username,'this.loginForm.username');

          //  const   loginForm=this.loginForm
          // this.loginForm.password=btoa(this.loginForm.password)
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              console.log(123);
              this.$router.push({
                // path: "/systemSelected",
                path: "/customerOperations/home",
                // name: ''
              });
            })
            .catch(() => {
              console.log('02040409293939494848')
              this.loading = false;
              this.getCode();
              console.log(123);
            });
        }
      });
    },
  },
  // watch: {
  //   $route: {
  //     handler: function (route) {
  //       this.redirect = route.query && route.query.redirect;
  //     },
  //     immediate: true,
  //   },
  // },
  created() {
    sessionStorage.clear()
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.loginBox {
  width: 100%;
  height: 100%;
  display: flex;
  .logo {
    position: relative;
    top: 0;
    left:0;
    width: 48%;
    height: 100%;
    background-image: url("../assets/image/bg4.png");
    background-size: cover;
    .textAndImg {
      width: 641px;
      height: 330px;
      background-image: url("../assets/image/text1.png");
      background-size: cover;
      margin: 0 auto;
    }
    .imgOne {
      width: 557px;
      height: 436px;
      background-image: url("../assets/image/logo.png");
      background-size: cover;
      margin: 20px auto;
    }
  }
  .left {
    position: relative;
    top: 0;
    right: 0;
    width: 52%;

    .login {
      // margin-top: 246px;
      // margin-left: 218px;
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%);
      width: 436px;
      // background-color: pink;
      .title {
        font-size: 24px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #2a2a2a;
        margin-bottom: 45px;
      }
      .inputTitle {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #777777;
      }
    }
  }
}

.el-form-item {
  padding: 0;
  margin-bottom: 20px !important;

  ::v-deep .el-input--small .el-input__inner {
    height: 48px;
  }
}
.el-button {
  width: 436px;
  height: 52px;
  background: #082aff;
  border-radius: 6px;
  margin-top: 22px;
}

.login-code {
  width: 113px;
  height: 48px;
  // float: right;
  img {
    width: 113px;
    height: 48px;
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
